/*
* @Date: 2021/1/26
* @Author: XueChengwu <xuechengwu@erayt.com>
* @Copyright: 2015-2019 Erayt, Inc.
* @Description: If you have some questions, please contact: xuechengwu@erayt.com.
*/
import React from 'react';
import Icon from '@/components/Icon';
import './index.scss';

export default class extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      top: 'auto',
      left: 'auto',
      right: 'auto',
      bottom: 'auto',
    }
  }

  onPositionChange = (e, type) => {
    const { onChange } = this.props;
    const dom = e.currentTarget;
    let value = Number(dom.innerText);
    if (isNaN(value)) {
      value = 'auto';
    }
    this.setState({
      [type]: value,
    }, () => {
      onChange && onChange(type, value);
    });
  }

  onPositionBatchChange = (pos) => {
    const { onBatchChange } = this.props;
    this.setState({
      ...pos,
    }, () => {
      onBatchChange && onBatchChange(pos);
    });
  }

  render() {
    const { top = 'auto', left = 'auto', right = 'auto', bottom = 'auto' } = this.state;
    return (
      <React.Fragment>
        <div className="position-quick-set">
          <Icon type="zuoshangjiao1" onClick={(e) => this.onPositionBatchChange({ left: 0, top: 0, right: 'auto', bottom: 'auto' })} />
          <Icon type="youshangjiao1" onClick={(e) => this.onPositionBatchChange({ right: 0, top: 0, left: 'auto', bottom: 'auto' })}/>
          <Icon type="zuoxiajiao1" onClick={(e) => this.onPositionBatchChange({ left: 0, bottom: 0, right: 'auto', top: 'auto' })} />
          <Icon type="youxiajiao1" onClick={(e) => this.onPositionBatchChange({ right: 0, bottom: 0, left: 'auto', top: 'auto' })} />
          <Icon type="kaozuo" onClick={(e) => this.onPositionBatchChange({ left: 0, top: 'auto', right: 'auto', bottom: 'auto' })} />
          <Icon type="kaoyou" onClick={(e) => this.onPositionBatchChange({ left: 'auto', top: 'auto', right: 0, bottom: 'auto' })} />
          <Icon type="dingbu" onClick={(e) => this.onPositionBatchChange({ left: 'auto', top: 0, right: 'auto', bottom: 'auto' })} />
          <Icon type="dibu" onClick={(e) => this.onPositionBatchChange({ left: 'auto', top: 'auto', right: 'auto', bottom: 0 })} />
          <Icon type="zhengzhongjian" onClick={(e) => this.onPositionBatchChange({ left: 'auto', top: 'auto', right: 'auto', bottom: 'auto' })}  />
        </div>
        <div className="position-box">
          <div className="position-top">
            <div
              contentEditable={true}
              className="position-top-input"
              onInput={(e) => this.onPositionChange(e, 'top')}
            >
              {top}
            </div>
          </div>
          <div className="position-left">
            <div
              contentEditable={true}
              className="position-left-input"
              onInput={(e) => this.onPositionChange(e, 'left')}
            >
              {left}
            </div>
          </div>
          <div className="position-right">
            <div
              contentEditable={true}
              className="position-right-input"
              onInput={(e) => this.onPositionChange(e, 'right')}
            >
              {right}
            </div>
          </div>
          <div className="position-bottom">
            <div
              contentEditable={true}
              className="position-bottom-input"
              onInput={(e) => this.onPositionChange(e, 'bottom')}
            >
              {bottom}
            </div>
          </div>
        </div>
      </React.Fragment>

    );
  }
}
